<template>
  <!-- 外部是flex-row的布局，所以项高等于行高，行高等于当前行最高的那一项 -->
  <div
    v-if="imgSrc"
    :src="imgSrc"
    :style="`background-image: url(${imgSrc});`"
    class="bg-no-repeat bg-cover min-h-72 bg-center"
  ></div>
  <div
    v-else
    class="flex flex-col justify-center p-10 text-white section-text-item"
    :style="bgColorStyle"
  >
    <ArtopgroupScrollFadeIn>
      <h3 class="text-xl mb-3">{{ title }}</h3>
      <p class="mb-9">{{ content }}</p>
      <template v-if="toLink">
        <a :href="toLink" class="block cursor-pointer">了解更多 &gt;</a>
      </template>
    </ArtopgroupScrollFadeIn>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  title?: string;
  content?: string;
  toLink?: string;
  bgColor?: string;
  imgSrc?: string;
}>();

const bgColorStyle = computed(() => {
  return props.bgColor ? `background-color:${props.bgColor}` : "";
});
</script>

<style scoped lang="scss">
.section-text-item {
  position: relative;
  &:hover {
    &::before {
      opacity: 0.2;
    }
  }
  &::before {
    content: "";
    position: absolute;
    background-color: #000;
    opacity: 0.3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }
}
</style>
